<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax小试牛刀</title>
    <style>
        #content {
            margin-top: 10px;
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<h3>该页面是测试：ajax小试牛刀</h3>
<button id="btn">点我发送请求（原生js-ajax-get）</button>
<div id="content"></div>
<script type="text/javascript">
    // 获取按钮
    const btn = document.getElementById('btn')
    const content = document.getElementById('content')
    // 给按钮绑定监听
    btn.onclick = () => {
        // 1. 创建 xhr 实例对象（new）
        const xhr = new XMLHttpRequest()

        // 接收数据
        // on  当 xxx 时候
        // ready  准备
        // state  状态
        // change  改变
        // xhr 内部有 5 种状态，值分别为：0、1、2、3、4
        // xhr 实例对象，在实例出来的那一刻状态就是 0
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                console.log(xhr.response)
                content.innerText = `<h3>${xhr.response}</h3>`
            }
        }


        // 2. 指定发送请求的：method、url
        xhr.open('GET', 'http://localhost:8080/test_get')
        // 3. 发送请求
        xhr.send()

    }
</script>
</body>
</html>
